<template>
    <div class="sales-profit-chart" ref="chartRef"></div>
</template>

<script>
import { defineComponent, ref, onMounted, watch } from '@vue/composition-api'
import * as echarts from 'echarts'
import { useAppointmentState } from '../hooks/useAppointmentState'

export default defineComponent({
    name: 'SalesProfitGril',

    props: {
        visibleData: {
            type: Array,
            default: () => []
        }
    },

    setup(props) {
        const chartRef = ref(null)
        const chartInstance = ref(null)
        // const { count_ls } = useAppointmentState()

        const initChart = () => {
            if (!chartRef.value) return

            chartInstance.value = echarts.init(chartRef.value)
            updateChart()
        }

        const updateChart = () => {
            if (!chartInstance.value) return

            const dates = props.visibleData.map(item => item.timestr)
            const amount_th_re = props.visibleData.map(item => item.amount_th_re || 0)
            const option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
                    borderColor: '#E5E5E5',
                    borderWidth: 1,
                    padding: [10, 15],
                    textStyle: {
                        color: '#333',
                        fontSize: 12,
                        lineHeight: 20
                    },
                    formatter: function (params) {
                        let result = `{bold|${params[0].axisValue}}\n`;
                        params.forEach((item, index) => {
                            result += `${item.marker} ${item.seriesName}: {bold|¥${item.value}}${index < params.length - 1 ? '\n' : ''}`;
                        });
                        return result;
                    },
                    rich: {
                        bold: {
                            fontWeight: 'bold',
                            color: '#333'
                        }
                    }
                },
                // legend: {
                //     data: ['退货额'],
                //     ttop: 0,
                //     left: 'center',
                //     itemWidth: 10,
                //     itemHeight: 10,
                //     textStyle: {
                //         color: '#999999',
                //         fontSize: 12
                //     }
                // },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '5%',
                    top: '10px',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: dates,
                    boundaryGap: true,
                    axisLine: {
                        lineStyle: {
                            color: '#E5E5E5'
                        }
                    },
                    axisLabel: {
                        color: '#999999',
                        interval: 'auto',
                        rotate: 30,
                        margin: 15,
                        formatter: function (value) {
                            return value.substring(5);
                        }
                    },
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#E5E5E5'
                        },
                        interval: 1
                    },
                    axisLabel: {
                        color: '#999999',
                        formatter: (value) => {
                            return '¥' + value
                        },
                        interval: 1
                    }
                },
                series: [
                    {
                        name: '退货额',
                        data: amount_th_re,
                        type: 'bar',
                        barWidth: props.visibleData.length <= 3 ? '40' : '20%',
                        barGap: '30%',
                        barCategoryGap: props.visibleData.length <= 3 ? '30%' : '20%',
                        lineStyle: {
                            color: '#FF5757'
                        },
                        itemStyle: {
                            color: '#FF5757'
                        }
                    },
                ]
            }
            chartInstance.value.setOption(option)
        }

        // Watch for data changes
        watch(() => props.visibleData, () => {
            updateChart()
        }, { deep: true })

        onMounted(() => {
            initChart()
            // Handle window resize
            window.addEventListener('resize', () => {
                chartInstance.value?.resize()
            })
        })

        return {
            chartRef
        }
    }
})
</script>

<style scoped>
.sales-profit-chart {
    width: 100%;
    height: 170px;
}
</style>
